<template>
<div>
    <el-button type="text" @click="back">返回</el-button><br>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
            <div class="block" style="margin-left: 105px;margin-top:30px"><el-avatar :size="130"></el-avatar>
            </div>
            <div  style="margin-left: 105px;margin-top:30px"><b style="margin-left:35px;font-size:23px">{{obj.username}}</b>
            <br><br><span>海纳百川，有容乃大</span></div><br><br>
            <span>联系方式：</span><span>{{obj.telephone}}</span><br><br>
            <span>状态：</span><span>{{obj.status}}</span><br><br>
            <span>地址：</span><span>{{obj.province}}{{obj.city}}</span><br><br>
        </el-tab-pane>
        <el-tab-pane label="订单信息" name="second">
            <el-table
        :data="order"
        stripe
        style="width: 100%">
        <el-table-column 
          prop="id"
          label="订单编号"
          width="130"
          align="center">
        </el-table-column>
        <el-table-column
          prop="orderTime"
          label="下单时间"
          width="170"
          align="center">
        </el-table-column>
        <el-table-column
          prop="total"
          label="总价"
          width="260"
          align="center">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="280"
          align="center">
        </el-table-column>
        <el-table-column
          prop="customerId"
          label="顾客ID"
          align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="details(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
            </el-tab-pane>
        <el-tab-pane label="基本收益" name="third">
          <el-table
        :data="detail"
        stripe
        style="width: 100%">
        <el-table-column 
          prop="id"
          label="订单编号"
          width="130"
          align="center">
        </el-table-column>
        <el-table-column
          prop="money"
          label="金额"
          width="400"
          align="center">
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          width="380"
          align="center">
        </el-table-column>
        <el-table-column
          label="凭证"
          width="360"
          align="center">
          <el-avatar :size="25" src="https://empty" @error="errorHandler">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
          </el-avatar>
        </el-table-column>
      </el-table>
        </el-tab-pane>
    </el-tabs>
</div>
</template>
<script>
import backToTopVue from '../components-demo/back-to-top.vue';
  export default {
    data() {
      return {
        activeName: 'first',
        obj:[],
        order:[],
        detail:[],
        // id:0,
      };
    },
    created(){
        // console.log(this.$route.query.id.id);
        this.obj=this.$route.query.id;
        console.log(this.obj)
        var id=this.obj.id;
        this.$axios.get("/order/query",{params:{waiterId:id}}).then(response=>{
          this.order=response.data.data
          // console.log(response)
        });
        this.$axios.get("/waiter/detailsShou",{params:{id}}).then(response=>{
          this.detail=response.data.data;
          console.log(this.detail)
        })
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      back(){
          this.$router.push({path:"/staffManagement/index"});
      },
       errorHandler() {
        return true
      },
      details(id){
        // console.log(id)
        this.$router.push({path:"/order/index",query:{id:id}});
      },
    }
  };
</script>